<template>
  <div>
    <el-form label-width="180px">
      <el-form-item label="选择需要订阅的消息类型">
        <el-checkbox-group v-model="typeList" class="vertical-checkbox-group">
          <el-checkbox v-for="type in msgTypes" :key="type.id" :label="type.id">{{ type.type }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  
  <script>
  
  export default {
    name: 'msgManage',
    data() {
      return {
        msgTypes: [],
        typeList:[]
      }
    },
    methods: {
      getMsgTypeList() {
        this.$http.post("http://localhost:8081/msg/getMsgTypeList", {
        }).then((res) => {
          this.msgTypes = res.data.data;
        })
      },
      submit() {
        this.$http.post("http://localhost:8081/addMsgUserType", {
          userId: 1,
          typList:this.typeList
        }).then((res) => {
          if (res.data.code === '200') {
            alert(res.data.message);
          }
        })
      },
      getTypeListByUserId() {
        this.$http.post("http://localhost:8081/getTypeListByUserId", {
          userId: 1
        }).then((res) => {
          this.typeList = res.data.data.map(item => item.typeId);
        })
    }
    },
    mounted() {
      this.getMsgTypeList();
      this.getTypeListByUserId();
    }
  }
  </script>
  
  <style>
  .vertical-checkbox-group {
    display: flex;
    flex-direction: column;
  }
  
  .vertical-checkbox-group .el-checkbox {
    margin-bottom: 10px; /* 调整间距 */
  }
  </style>
  